<%--<jsp:useBean id="emp" scope="request" type="com.yqs.entity.Emp"/>--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改员工信息</title>
    <style>
        /* 表单整体样式 */
        form {
            background: #ffffff; /* 使用白色背景 */
            padding: 40px; /* 增加内边距 */
            border-radius: 10px; /* 边框圆角 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
            max-width: 600px; /* 调整最大宽度 */
            margin: 60px auto; /* 自动居中并增加外边距 */
        }

        /* 表单标题样式 */
        legend {
            font-size: 2em; /* 增加字体大小 */
            color: #333; /* 字体颜色 */
            font-weight: bold; /* 加粗字体 */
            margin-bottom: 15px; /* 增加下边距 */
            padding: 0 10px; /* 调整左右内边距 */
        }

        /* 输入框和选择框样式 */
        input[type="text"],
        input[type="number"],
        input[type="date"],
        select {
            border: 1px solid #ccc; /* 调整边框颜色 */
            border-radius: 6px; /* 调整边框圆角 */
            padding: 12px; /* 增加内边距 */
            margin-bottom: 25px; /* 增加下边距 */
            box-sizing: border-box; /* 边框计算方式 */
            transition: border-color 0.3s ease; /* 边框颜色变化的过渡效果 */
        }

        /* 输入框和选择框悬浮状态 */
        input[type="text"]:hover,
        input[type="number"]:hover,
        input[type="date"]:hover,
        select:hover {
            border-color: #5cb85c; /* 悬浮时边框颜色 */
        }

        /* 提交按钮样式 */
        input[type="submit"] {
            background-color: #007bff; /* 使用不同的背景颜色 */
            color: white; /* 字体颜色 */
            padding: 15px 30px; /* 调整内边距 */
            font-size: 1.1em; /* 增加字体大小 */
            border: none; /* 无边框 */
            border-radius: 8px; /* 调整边框圆角 */
            cursor: pointer; /* 鼠标悬停时显示手形图标 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加按钮阴影 */
            transition: transform 0.2s ease, box-shadow 0.2s ease; /* 增加点击效果 */
        }

        /* 提交按钮悬浮状态 */
        input[type="submit"]:hover {
            background-color: #0069d9; /* 悬浮时的背景颜色 */
            transform: translateY(-2px); /* 悬浮时上移 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 悬浮时阴影效果增强 */
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            form {
                padding: 20px;
                margin: 20px auto;
            }
        }
    </style>
</head>
<body>
<!-- 表单容器，用于修改员工信息 -->
<form action="/empUpdate" method="post">
    <input type="hidden" id="empId" name="empId" value="${emp.empId}"> <!-- 员工ID，由服务器端传递 -->

    <fieldset>
        <legend>修改员工信息</legend>

        <!-- 员工姓名输入框 -->
        <label for="empName">员工姓名：</label>
        <input type="text" id="empName" name="empName" value="${emp.empName}" required>

        <!-- 员工工资输入框 -->
        <label for="salary">员工工资：</label>
        <input type="number" id="salary" name="salary" value="${emp.salary}" required min="0">

        <!-- 入职时间选择器 -->
        <label for="hireDate">入职时间：</label>
        <input type="date" id="hireDate" name="hireDate" value="${emp.hireDate}" required>

        <!-- 部门编号下拉选择框 -->
        <label for="deptId">部门编号：</label>
        <select id="deptId" name="deptId" required>
            <option value="">请选择部门</option>
            <!-- 以下选项由服务器端根据emp对象的部门信息动态生成 -->
            <option value="1" ${emp.deptId == 1 ? 'selected' : ''}>技术部</option>
            <option value="2" ${emp.deptId == 2 ? 'selected' : ''}>市场部</option>
            <option value="3" ${emp.deptId == 3 ? 'selected' : ''}>人事部</option>
            <!-- 其他部门选项 -->
        </select>

        <!-- 提交按钮 -->
        <input type="submit" value="更新">
    </fieldset>
</form>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function () {
        $.ajax({
            type: 'POST',
            url: '/empMsg',
            dataType: 'JSON',
            success: function (result) {
                $("#empId").val(result.empId);
                // 设置员工姓名
                $("#empName").val(result.empName);
                // 设置员工工资
                $("#salary").val(result.salary);
                // 设置入职时间
                $("#hireDate").val(result.hireDate);
                // 设置部门编号，需要确保result.dept存在且有deptId属性
                if (result.dept && result.dept.deptId) {
                    $("#deptId").val(result.dept.deptId);
                } else {
                    // 如果没有部门信息，可以选择清空或者设置为默认选项
                    $("#deptId").val("");
                }
            }
        })
    })
</script>
</body>
</html>